import { defineStore } from "pinia";
import { ref, watch } from "vue";

function initState() {
  return {
    isCollapse: false,
    currentMenu: null,
    tags: [],
    routerList: [],
    menuList: [],
  };
}

export const useAllMenuDataStore = defineStore(
  "allMenuData",
  () => {
    const state = ref(initState());
    function selectMenu(val) {
      console.log("当前点击的菜单:", val);
      if (state.value.menuList[0].children) {
        state.value.currentMenu = val;
        const index = state.value.tags.findIndex(
          (item) => item.meta.name === val.meta.name
        );
        console.log("index",index);
        
        if (index === -1) {
          state.value.tags.push(val);
        }
      } else {
        state.value.currentMenu = val;
        const index = state.value.tags.findIndex(
          (item) => item.meta.name === val.meta.name
        );
        if (index === -1) {
          state.value.tags.push(val);
        }
      }
    }

    // 查找要删除的标签在 tags 数组中的索引位置，使用 splice 方法从数组中删除该标签。
    function undateTags(val) {
      let index = state.value.tags.findIndex(
        (item) => item.meta.name === val.meta.name
      );
      console.log("index", index);
      //  从 tags 数组中删除指定索引 index 处的标签。 1 表示只删除一个元素。
      state.value.tags.splice(index, 1);
    }

    function updateMenuList(val) {
      state.value.menuList = val;
    }

    // 动态菜单
    function dynamicMenu(router, type) {
      // 1. 从持久化存储恢复菜单数据
      if (state.value.menuList.length === 0) {
        const savedState = JSON.parse(localStorage.getItem("all-menu-data"));
        if (savedState?.menuList) {
          state.value.menuList = savedState.menuList;
        } else {
          console.warn("刷新时未找到菜单数据");
          return false; // 返回false表示刷新失败
        }
      }

      // 2. 清理旧路由（更彻底的方式）
      let routers = router.getRoutes();
      routers.forEach((item) => {
        if (item.name == "main" || item.name == "login" || item.name == "404") {
          return;
        } else {
          try {
            router.removeRoute(item.name);
          } catch (e) {
            console.warn(`移除路由 ${item.name} 失败:`, e);
          }
        }
      });
      // 2. 重置路由列表
      state.value.routerList = [];
      //  3.动态加载组件
      //从全局状态获取英单配置
      const menu = state.value.menuList;
      // 通过glob导入模块
      const module = import.meta.glob("../views/**/**/*.vue");
      const routeLoadPromises = [];
      // 递归遍历路由数据，生成路由配置
      menu.forEach((item) => {
        console.log("当前处理的菜单项:", item);
        if (item.children) {
          item.children.forEach((val) => {
            // 拼接组件路径并关联对应组件
            val.component = module[`../views${val.meta.path}/index.vue`];
            console.log("子菜单项 component 值:", val.component);
            // router.addRoute("main", val);
            routeLoadPromises.push(
              router.addRoute("main", val) // 等待路由注册完成
            );
          });
        } else {
          item.component = module[`../views${item.meta.path}/index.vue`];
          console.log("路由路由2", item.component);
          // router.addRoute("main", item);
          routeLoadPromises.push(
            router.addRoute("main", item) // 等待路由注册完成
          );
        }
      });
      // 3. 等待所有路由注册完成
      Promise.all(routeLoadPromises).then(() => {
        // 4. 恢复当前选中菜单的路由
        if (state.value.currentMenu) {
          console.log("恢复当前选中菜单的路由", state.value.currentMenu);
          const targetPath = state.value.currentMenu.path; // 假设 currentMenu 包含 path
          if (router.hasRoute(targetPath)) {
            router.push(targetPath); // 跳转到之前选中的菜单路径
          } else {
            console.error(`路由 ${targetPath} 未注册！`);
          }
        }
      });
      if (type === "refresh") {
        const currentPath = router.currentRoute.value.path;
        console.log("currentPath", currentPath);
        if (!router.hasRoute(currentPath)) {
          router.replace("/"); // 或跳转到默认页面
        }
      }
    }
    return {
      state,
      selectMenu,
      undateTags,
      dynamicMenu,
      updateMenuList,
    };
  },
  {
    // 持久化配置
    persist: {
      key: "all-menu-data", // 存储的键名
      storage: localStorage, // 存储方式，可以是 localStorage 或 sessionStorage
      paths: ["state"], // 只持久化 state 数据
      // 如果需要部分持久化某些字段
      // paths: ['state.menuList', 'state.tags'],
      // 如果需要自定义序列化/反序列化
      serializer: {
        serialize: JSON.stringify,
        deserialize: JSON.parse,
      },
    },
  }
);
